<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/Class information.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/lw-Student.css">
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../js/LwSthdent.js"></script>
</head>
<body>

<!--///  班级表单  、、、-->
<div class="">
    <div class="Student-box ">
        <div class="Student-menu">
            <select class="form-control">
                <option>班级</option>
                <option>一班</option>
                <option>二班</option>
                <option>三班</option>
                <option>四班</option>
            </select>
        </div>
        <div class="Student-box2">
            <button type="button" class="btn btn-success StudenTplus1 StudentPlus0" >＋新学生</button>
        </div>
        <div class="pull-right Student-box3">
            <div class="col-lg-3  col-sm-3 col-md-3 col-xs-3 pull-right">
                <div class="input-group ">
                    <input type="text" class="form-control" placeholder="搜索栏">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button">确认</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover table-striped text-center table">
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>班主任</th>
                <th>联系人</th>
                <th>联系号码</th>
                <th>状态</th>
                <th>功能</th>
            </tr>
            <tr class="StudentButton">
                <td class="11">1</td>
                <td class="22">张三</td>
                <td class="33">男</td>
                <td class="44">ccc</td>
                <td class="55">二班</td>
                <td class="66">某某某</td>
                <td class="77">13222222222</td>
                <td class="88">在读</td>
                <td id="LFunction"><a class="btn btn-sm btn-default glyphicon glyphicon-star ccc" data-a="a" href="javascript:;" role="button" data-details="details">详情</a>
                    <a class="btn btn-sm btn-default glyphicon glyphicon-edit bbb" data-b="b" href="javascript:;" role="button" data-details="details">设置</a>
                    <a class="btn btn-sm btn-default  glyphicon glyphicon-remove-sign aaaa" data-c="c" href="javascript:;" role="button" data-details="details">删除</a>
                </td>
            </tr>
            <tr class=""></tr>
            <tr data-lw="LW">
                <td class="1">1</td>
                <td class="2">张三</td>
                <td class="3">男</td>
                <td class="4">ccc</td>
                <td class="5">二班</td>
                <td class="6">某某某</td>
                <td class="7">13222222222</td>
                <td class="8">在读</td>
                <td id="LFunction"><a class="btn btn-sm btn-default glyphicon glyphicon-star ccc" data-a="a" href="javascript:;" role="button" data-details="details">详情</a>
                    <a class="btn btn-sm btn-default glyphicon glyphicon-edit bbb" data-b="b" href="javascript:;" role="button" data-details="details">设置</a>
                    <a class="btn btn-sm btn-default  glyphicon glyphicon-remove-sign aaaa" data-c="c" href="javascript:;" role="button" data-details="details">删除</a>
                </td>
            </tr>
            <tr class="">
                <td class="11">1</td>
                <td class="22">张三</td>
                <td class="33">男</td>
                <td class="44">ccc</td>
                <td class="55">二班</td>
                <td class="66">某某某</td>
                <td class="77">13222222222</td>
                <td class="88">在读</td>
                <td id="LFunction"><a class="btn btn-sm btn-default glyphicon glyphicon-star ccc" data-a="a" href="javascript:;" role="button" data-details="details">详情</a>
                    <a class="btn btn-sm btn-default glyphicon glyphicon-edit bbb" data-b="b" href="javascript:;" role="button" data-details="details">设置</a>
                    <a class="btn btn-sm btn-default  glyphicon glyphicon-remove-sign aaaa" data-c="c" href="javascript:;" role="button" data-details="details">删除</a>
                </td>
            </tr>
        <tr class=""></tr>
        <tr data-lw="LW">
            <td class="111">1</td>
            <td class="222">张三</td>
            <td class="333">男</td>
            <td class="444">ccc</td>
            <td class="555">二班</td>
            <td class="666">某某某</td>
            <td class="777">13222222222</td>
            <td class="888">在读</td>
            <td id="LFunction"><a class="btn btn-sm btn-default glyphicon glyphicon-star ccc" data-a="a" href="javascript:;" role="button" data-details="details">详情</a>
                <a class="btn btn-sm btn-default glyphicon glyphicon-edit bbb" data-b="b" href="javascript:;" role="button" data-details="details">设置</a>
                <a class="btn btn-sm btn-default  glyphicon glyphicon-remove-sign aaaa" data-c="c" href="javascript:;" role="button" data-details="details">删除</a>
            </td>
        </tr>

            <tr id="Tr"></tr>
     </table>
</div>

<!--  分页器              -->
<nav aria-label="...">
    <ul class="pager">
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">首页</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">&laquo;</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">1</a>
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">2</a>
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">3</a>
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">4</a>
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">5</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">&raquo;</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="javascript:;" role="button" data-details="details">尾页</a>
            </div>
        </li>
    </ul>
</nav>

<!--  添加页面  -->
<div class="StudentPlus" >
    <div class="StudentPlus1">
        <div class="StudentPlus2">
            <h2 class="text-center">添加新同学</h2>
            <div  class="StudentDetails3"></div>
            <div class="row">
                <div class="col-lg-10  col-sm-10 col-md-10 col-xs-10">
                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >编号</button>
      </span>
                        <input type="text" class="form-control" placeholder="数字" id="LInitial">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">名字</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文  2-4字"  id="LName">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >性别</button>
      </span>
                        <input type="text" class="form-control" placeholder="男 女" id="LGender" >
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >班级</button>
      </span>
                        <input type="text" class="form-control" placeholder="班级"  id="LClass">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >班主任</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文 2-5字" id="LHeadmaster">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"  >联系人</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文 2-5字" id="LContacts">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >联系号码</button>
      </span>
                        <input type="text" class="form-control" placeholder="11位电话号码" id="LNumber">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"  >状态</button>
      </span>
                        <input type="text" class="form-control" placeholder="当前是否 在读" id="LState">
                    </div>
                </div>
            </div>
            <div class="text-center row">
                <button class="btn btn-default" type="submit" id="Lok">确认</button>
                <button class="btn btn-default" type="submit" id="Lno">取消</button>
            </div>
        </div>
    </div>
</div>

<!--//  详情-->
<div id="StudentDetails">
    <div id="StudentDetails1">
        <div id="StudentDetails2">
            <h2 class="text-center">详细信息</h2>

            <div  class="StudentDetails3"></div>
            <ul style="list-style: none;">
                <li>姓名：<span>张三</span></li>
                <li>年龄：<span>8岁</span></li>
                <li>性别：<span>男</span></li>
                <li>班级：<span>二班</span></li>
                <li>班主任：<span>某某某</span></li>
                <li>联系人：<span>某某某</span></li>
                <li>联系号码：<span>133029837465</span></li>
                <li>状态：<span>在读</span></li>
                <li>住址：<span>胡齐哈尔市马尔咋哈</span></li>
            </ul>
            <div class="text-center row">
                <button class="btn btn-default" type="submit" id="Lok2">确认</button>
                <button class="btn btn-default" type="submit"  id="Lno2">取消</button>
            </div>
        </div>
    </div>
</div>


<!--   设置界面-->
<div class="Setup" >
    <div class="Setup1">
        <div class="Setup2">
            <h2 class="text-center">修改设置</h2>
            <div  class="StudentDetails3"></div>
            <div class="row">
                <div class="col-lg-10  col-sm-10 col-md-10 col-xs-10">
                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >编号</button>
      </span>
                        <input type="text" class="form-control" placeholder="数字" id="Initial">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">名字</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文  2-4字"  id="Name">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >性别</button>
      </span>
                        <input type="text" class="form-control" placeholder="男 女" id="Gender" >
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >班级</button>
      </span>
                        <input type="text" class="form-control" placeholder="班级"  id="Class">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >班主任</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文 2-5字" id="Headmaster">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"  >联系人</button>
      </span>
                        <input type="text" class="form-control" placeholder="中文 2-5字" id="Contacts">
                    </div>


                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" >联系号码</button>
      </span>
                        <input type="text" class="form-control" placeholder="11位电话号码" id="Number">
                    </div>

                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"  >状态</button>
      </span>
                        <input type="text" class="form-control" placeholder="当前是否 在读" id="State">
                    </div>
                </div>
            </div>
            <div class="text-center row">
                <button class="btn btn-default" type="submit" id="ok">确认</button>
                <button class="btn btn-default" type="submit" id="no">取消</button>
            </div>
        </div>
    </div>
</div>

<script>


    $('.StudentPlus0').click(function () {
        $('.StudentPlus').css("display","block")
    })
    $('#Lok').click(function () {
        $('#Tr').before("<tr><td>"+$('#LInitial').val()+"</td><td> " +
            ""+$('#LName').val()+"</td>" +
            "<td>"+$('#LGender').val()+"</td>" +
            "<td>"+$('#LClass').val()+"</td>" +
            "<td>"+$('#LHeadmaster').val()+"</td>" +
            "<td>"+$('#LContacts').val()+"</td>" +
            "<td>"+$("#LNumber").val()+"</td>" +
            "<td>"+$("#LState").val()+"</td>" +
            "<td>"+$('#LFunction').html()+"</td></tr>");
        $('.StudentPlus').css("display","none")

        // (function () {
        //     var reg=/^[0-9]{0,3}$/
        //     var LInitial=$('#LInitial').val()
        //
        //     if(!reg.test(LInitial)){
        //         alert('编号错误')
        //         LInitial=null
        //     }
        // })()

        // (function () {
        //     var reg=/^[\u4e00-\u9fa5]{2,4}$/;
        //     var Initial=$('#LName').val()
        //     if(!reg.test(Initial)){
        //         alert('姓名错误')
        //         $("#xxx").css('display',"block")
        //
        //     }
        // })()

    });
    // let oBut=document.querySelectorAll('[ data-c="c"]');
    //
    // for(var i=0;i<oBut.length;i++){
    //     oBut[i].onclick=function () {
    //       alert(2222)
    //         let  lw=document.querySelector('[data-LW="LW"]');
    //         for(var x=0;x<lw.length;x++){
    //            lw[x].onclick=function () {
    //
    //            }
    //         }
    //     }
    // }
    //
    // $('.aaaa').click(function () {
    //     alert('111')
    //
    //     var  oL=document.querySelectorAll('[data-LW="LW"]');
    //
    //     for(var i=0;i<oL.length;i++){
    //         oL[i].empty();
    //     }
    //
    // })
     //                     删除



    $('.aaaa').click(function () {
        $(this).parents('tr').remove()
    })

    $('.ccc').click(function () {
        $('#StudentDetails').css('display','block')
    })


$('.bbb').click(function () {
    $('.Setup').css('display','block');

});


    $('#ok').click(function () {
        let  oA=$("<td>"+$('#Initial').val()+"</td>");
        let   oB=$("<td>"+$('#Name').val()+"</td>");
        let  oC=$("<td>"+$('#Gender').val()+"</td>");
        let  oD=$("<td>"+$('#Class').val()+"</td>");
        let  oE=$("<td>"+$('#Headmaster').val()+"</td>");
        let  oF=$("<td>"+$('#Contacts').val()+"</td>");
        let  oG=$("<td>"+$('#Number').val()+"</td>");
        let   oH=$("<td>"+$('#State').val()+"</td>");

           oA.replaceAll(".1");
           oB.replaceAll(".2");
           oC.replaceAll(".3");
           oD.replaceAll(".4");
           oE.replaceAll(".5");
           oF.replaceAll(".6");
           oG.replaceAll(".7");
           oH.replaceAll(".8");

        $('.Setup').css('display','none');
    });

  $('#Lno').click(function () {
      $(".StudentPlus").css('display','none')
  });
    $('#Lno2').click(function () {
        $("#StudentDetails").css('display','none')
    });
    $('#Lok2').click(function () {
        $("#StudentDetails").css('display','none')
    });
    $('#no').click(function () {
        $(".Setup").css('display','none')
    });
</script>
</body>
</html>



